<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<%@include file="/comment/comment.jsp" %>
<style>
    .code {
        background-color: silver;
        font-family: Arial; /*设置字体*/
        font-style: initial;
        color: brown;
        font-size: 20px;
        border: 0;
        padding: 2px 3px;
        letter-spacing: 3px;
        font-weight: bolder;

        width: 100px;
        height: 23px;
        margin-left: 150px;
        margin-top: -35px;
    }

    .yz {
        position: absolute;
        margin-left: 260px;
        margin-top: -25px;
    }
</style>
<script src="../js/jquery-1.8.2.min.js"></script>
<script>
    var code;

    function createCode() {  //函数体
        code = "";
        var codeLength = 5; //验证码的长度
        var checkCode = document.getElementById("checkCode");
        var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
        for (var i = 0; i < codeLength; i++) {
            var charNum = Math.floor(Math.random() * 52);//设置随机产生
            code += codeChars[charNum];
        }
        if (checkCode) {
            checkCode.className = "code";
            checkCode.innerHTML = code;
        }
    }

    function Submit() {
        //获取数据
        var account = $("#account").val();
        var password = $("#password").val();
        var passwords = $("#passwords").val();
        var nickName = $("#nickName").val();
        var phone = $("#phone").val();
        var reg = $("#reg").val();

        //获取身份证号的数据
        var idCard = $("#idCard").val();
        //身份证号的正则表达式
        var regIdCard = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

        //获取邮箱的数据
        var email = $("#email").val();
        //邮箱的正则表达式
        var regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

        //手机的正则表达式
        var regPhone = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;

        //获取复选框是否选中
        var isChecked = $('#checkBox').is(':checked');

        //判断登录用户名不能为空
        if (account == "") {
            alert("登录用户名不能为空!");
            return;
        }

        //判断密码不能为空
        if (password == "") {
            alert("密码不能为空!");
            return;
        }

        //判断确认密码不能为空
        if (passwords == "") {
            alert("确认密码不能为空!");
            return;
        }

        if (password != passwords) {
            alert("两次输入的密码不一致，请重新输入!");
            return;
        }

        //判断真实姓名不能为空
        if (nickName == "") {
            alert("真实姓名不能为空!");
            return;
        }

        //判断身份证号格式是否正确
        if (idCard != "") {
            if (!regIdCard.test(idCard)) {
                alert("身份证号的格式不正确!");
                return;
            }
        }

        //判断邮箱的格式是否正确
        if (email != "") {
            if (!regEmail.test(email)) {
                alert("邮箱的格式不正确!");
                return;
            }
        }

        //判断手机不能为空
        if (phone == "") {
            alert("手机不能为空!");
            return;
        }

        //判断手机的格式是否正确
        if (phone != "") {
            if (!regPhone.test(phone)) {
                alert("手机的格式不正确!");
                return;
            }
        }

        //判断验证码不能为空
        if (reg == "") {
            alert("验证码不能为空!");
            createCode();
            return;
        }

        //判断你输入的验证码是否正确
        if ($("#reg").val().toUpperCase() != code.toUpperCase()) {
            alert("您输入的验证码有误，请重新输入!");
            createCode();
            return;
        }

        //判断复选框是否选中
        if (isChecked == false) {
            alert("请选择复选框！");
            return;
        }

        //手动提交
        $("#myForm").submit();
    }
</script>
<body onload="createCode()">
<%@include file="/comment/header.jsp" %>
<div class="log_bg">
    <div class="top">
        <div class="logo"><a href="Index.jsp"><img src="images/logo.png"/></a></div>
    </div>
    <div class="regist">
        <div class="log_img"><img src="images/l_img.png" width="611" height="425"/></div>
        <div class="reg_c">
            <form action="UserServlet" id="myForm">
                <input type="hidden" name="action" value="register"/>
                <table border="0" style="width:420px; font-size:14px; margin-top:20px;" cellspacing="0" cellpadding="0">
                    <tr height="50" valign="top">
                        <td width="95">&nbsp;</td>
                        <td>
                            <span class="fl" style="font-size:24px;">注册</span>
                            <span class="fr">已有商城账号，<a href="Login.jsp" style="color:#ff4e00;">我要登录</a></span>
                        </td>
                    </tr>
                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;登录用户名 &nbsp;</td>
                        <td><input type="text" value="" class="l_user" id="account" name="account"/></td>
                    </tr>
                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;密码 &nbsp;</td>
                        <td><input type="password" value="" class="l_pwd" id="password" name="password"/></td>
                    </tr>
                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;确认密码 &nbsp;</td>
                        <td><input type="password" value="" class="l_pwd" id="passwords"/></td>
                    </tr>
                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;真实姓名 &nbsp;</td>
                        <td><input type="text" value="" class="l_user" id="nickName" name="nickName"/></td>
                    </tr>
                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;性別 &nbsp;</td>
                        <td>
                            <input type="radio" class="l_gender" name="gender" value="1" checked/> 男&nbsp;&nbsp;&nbsp;
                            <input type="radio" class="l_gender" name="gender" value="2"/> 女
                        </td>
                    </tr>
                    <tr height="50">
                        <td align="right">&nbsp;身份证号 &nbsp;</td>
                        <td><input type="text" value="" class="l_user" id="idCard" name="idCard"/></td>
                    </tr>
                    <tr height="50">
                        <td align="right">&nbsp;邮箱 &nbsp;</td>
                        <td><input type="text" value="" class="l_email" id="email" name="email"/></td>
                    </tr>
                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;手机 &nbsp;</td>
                        <td><input type="text" value="" class="l_tel" id="phone" name="phone"/></td>
                    </tr>

                    <tr height="50">
                        <td align="right"><font color="#ff4e00">*</font>&nbsp;验证码 &nbsp;</td>
                        <td>
                            <input type="text" value="" id="reg" class="l_ipt"/>
                            <div class="code" id="checkCode" onclick="createCode()"></div>
                            <a style="font-size:12px; font-family:'宋体';" class="yz" onclick="createCode()">换一张</a>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td style="font-size:12px; padding-top:20px;">
                	<span style="font-family:'宋体';" class="fl">
                    	<label class="r_rad"><input id="checkBox" type="checkbox"/></label><label class="r_txt">我已阅读并接受《用户协议》</label>
                    </span>
                        </td>
                    </tr>
                    <tr height="60">
                        <td>&nbsp;</td>
                        <td><input type="button" value="立即注册" class="log_btn" onclick="Submit()"/></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
<%@include file="/comment/version.jsp" %>
</body>
<script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
</html>